<template>
  <div class="category">
    <div class="content">
      <slot :music="musicList" a="你好"></slot>
    </div>

    <div class="footer">
      <slot name="footer" :footerOption="footerOption">
        <button
          v-for="(it, index) in footerOption"
          :key="index"
          @click="it.handle == 'comfirm' ? confrom() : cancel()"
        >
          {{ it.content }}
        </button>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="Caregory2">
import { reactive } from "vue";

const musicList = reactive([
  { id: 1, name: "465" },
  { id: 2, name: "5246984" },
  { id: 3, name: "78874" },
]);
const confrom = () => {
  emit("confirm");
};
const cancel = () => {
  emit("cancel");
};
const footerOption = reactive([
  {
    type: "button",
    content: "取消",
    handle: "cancel",
  },
  {
    type: "button",
    content: "确定",
    handle: "comfirm",
  },
]);

const emit = defineEmits(["confirm", "cancel"]);
</script>

<style scoped lang="scss">
.category {
  margin-top: 5px;
  width: 200px;
  background-color: skyblue;
  height: 200px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    background-color: rebeccapurple;
  }
  .footer {
    padding: 5px;
    height: 35px;
    background-color: palevioletred;
    display: flex;
    justify-content: space-evenly;
  }
}
</style>
